<template>
	<x-border :title=" border ? border.title: ''" :desc="border ? border.description : ''" ref="xBorder" type="focus" icon="icon-5333-icon43">
		<div style="background:#ffffff;" class="list_detail" v-loading="loading" v-if="!setting.isAdd">
			<div class="container" v-if="viewModel">
				<div class="container-head">
					<el-breadcrumb separator="/" class="container-head_top">
						<el-breadcrumb-item>店铺：{{viewModel.store.name}}</el-breadcrumb-item>
						<el-breadcrumb-item>商城模式：{{viewModel.priceStyleConfig.name}}</el-breadcrumb-item>
						<el-breadcrumb-item>
							类目：{{viewModel.category.name}}
						</el-breadcrumb-item>
						<el-breadcrumb-item v-if="false">
							<div class="categories" @click="isAdd = true">切换类目</div>
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="failText" v-if="operation()">操作信息:{{viewModel.productDetail.productDetailExtension.aidutMessage}}</div>
				<basic ref="basic" :productView="viewModel" @chang="productViewPrice"></basic>
				<sale ref="ref_sale" :productView="viewModel"></sale>
				<imagepic :productView="viewModel" @changeImage="changeImage"></imagepic>
				<detail :productView="viewModel"></detail>
				<cat :widgetData="widgetData" :productView="viewModel" @changeClass="changeClass"></cat>
				<div class="goods_info buttom-save">
					<el-button class="goods_info-but right" v-if="judgeSave()" :loading="saveLoading" @click="save">保存</el-button>
					<el-button class="goods_button" v-if="$ala.filter() === 4" @click="UnderCose">下架</el-button>
					<popup ref="dialog" :init="init" :viewModel="viewModel"></popup>
				</div>
			</div>
		</div>
		<add v-if="setting.isAdd" @selectCategory="selectCategory" :filterType="$ala.filter()"></add>
	</x-border>
</template>

<script>
	import add from './add'
	import service from './service'
	import basic from './widgets/basic.vue'
	import detail from './widgets/content.vue'
	import cat from './widgets/classtag.vue'
	import imagepic from './widgets/image.vue'
	import sale from './widgets/sale.vue'
	import popup from './widgets/dialog.vue'
	import judge from './widgets/js/judge'
	export default {
		props: {
			widgetData: {}
		},
		components: {
			basic,
			sale,
			detail,
			cat,
			imagepic,
			add,
			popup
		},
		data() {
			return {
				loading: true,
				product: {},
				setting: {
					isAdd: true, // 判断是新增商品还是编辑商品
					title: '添加商品' // 标题
				},

				list: [
					[123, 123],
					[134, 135]
				],

				border: null,
				categoryId: '', // 类目id
				priceStyleId: null, // 商城模式Id
				category: {},
				saleConfigs: [],
				displayConfigs: [],
				productSkus: [],
				detail: null,
				images: [],
				viewModel: null,
				saveLoading: false,
				classIds: [] // 九星专用
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.loading = true
				if (this.widgetData && this.widgetData.value) {
					this.priceStyleId = this.widgetData.value.priceStyleId
				}
				if (!this.priceStyleId) {
					this.$ala.alert('商城模式不正确,请在DIY系统中配置')
				}
				this.border = await this.$ala.httpGet('api/ProductDetail/PriceStyleBorder', {
					id: this.priceStyleId
				})

				if (this.categoryId || this.$ala.getId()) {
					this.setting.isAdd = false
				}
				if (this.setting.isAdd === false) {
					this.border.title = this.border.title + '商品编辑'
					this.viewModel = await service.getProductView(this.categoryId, this.priceStyleId)
					this.setting = this.viewModel.setting
					this.$nextTick(() => {
						var border = {
							title: this.border.title
						}
						this.$refs.xBorder.init(border)
					})
				} else {
					this.border.title = this.border.title + '商品添加'
				}
				this.loading = false
				if (this.viewModel.classIds === undefined) {
					this.viewModel.classIds = this.viewModel.productDetail.productDetailExtension.storeClass
				}
			},
			productViewPrice(scope, ev) {
				this.$refs.ref_sale.fillData(scope, ev)
			},
			async save() {
				this.saveLoading = true
				await service.save(this)
				this.saveLoading = false
			},
			// 修改分类
			changeClass(classes) {
				this.viewModel.productDetail.productDetailExtension.storeClass = classes
				this.viewModel.classIds = classes // 九星专用
			},
			// 修改图片
			changeImage(uploadImage) {
				this.viewModel.images = []
				this.images = uploadImage
				for (let item of uploadImage) {
					if (item) {
						this.viewModel.images.push(item)
					}
				}
			},
			// 新商品选择类目
			selectCategory(categoryId) {
				this.categoryId = categoryId
				this.setting.isAdd = false
				this.init()
			},
			judgeSave() {
				return judge.judgeSave(this)
			},
			judgeExamine() {
				return judge.judgeExamine(this)
			},
			operation() {
				return judge.operation(this)
			}
		}
	}
</script>
<style lang="scss">
	@import "./widgets/style/_index.scss";
</style>